<!doctype html>
<html class="no-js">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>芝麻街</title>
    <!-- Set render engine for 360 browser -->
    <meta name="renderer" content="webkit">
    <!--css样式列表-->
    <link rel="stylesheet" href="css/amazeui.min.css">
    <link rel="stylesheet" href="css/app.css">
    <!--js脚本列表-->
    <script src="js/jquery.min.js"></script>
    <script src="js/amazeui.min.js"></script>
    <script src="js/app.js"></script>
    <!--必要JS（自适应手机端 px -> rem ）-->

    <script>
        !function(e) {
            function t(a){if(i[a])return i[a].exports;var n=i[a]={exports: {
            },id:a,loaded:!1
            };
                return e[a].call(n.exports,n,n.exports,t),n.loaded=!0,n.exports
            }
            var i= {
            };
            return t.m=e,t.c=i,t.p="",t(0)
        }([function(e,t) {
            "use strict"
            ;Object.defineProperty(t,"__esModule",{value: !0
            });
            var i=window;t["default"]=i.flex=function(e,t) {
                var a=e||100,n=t||1,r=i.document,o=navigator.userAgent,d=o.match(/Android[\S\s]+AppleWebkit\/(\d{3})/i),l=o.match(/U3\/((\d+|\.) {5,})/i),c=l&&parseInt(l[1].split(".").join(""),10)>=80,p=navigator.appVersion.match(/(iphone|ipad|ipod)/gi),s=i.devicePixelRatio||1;p||d&&d[1]>534||c||(s=1);var u=1/s,m=r.querySelector('meta[name="viewport"]');m||(m=r.createElement("meta"),m.setAttribute("name","viewport"),r.head.appendChild(m)),m.setAttribute("content","width=device-width,user-scalable=no,initial-scale="+u+",maximum-scale="+u+",minimum-scale="+u),r.documentElement.style.fontSize=a/2*s*n+"px"
            },e.exports=t["default"]
        }]);
        flex(100, 1);
    </script>
    <!------------------------>
</head>
<body>
<!--顶部导航-->
<div class="IndexHeader">
    <div class="IndexSite">深圳</div>
    <div class="IndexTitle">芝麻街</div>
    <div class="IndexSearch"><a href="22搜索.html"><img src="images/search.png" alt="搜索"/></a></div>
</div>

<div class="CommonMain">
    <!--banner-->
    <div class="banner">
        <div class="am-slider am-slider-default">
            <ul class="am-slides">
                <li><img src="images/banner.jpg" /></li>
                <li><img src="images/banner.jpg" /></li>
                <li><img src="images/banner.jpg" /></li>
            </ul>
        </div>
    </div>
    <!--分类推荐-->
    <div class="dm-di1">
        <ul class="am-avg-sm-4">
            <li>
                <a href="#">
                    <img src="images/icon01.png" alt=""/>
                    <p>美食</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="images/icon02.png" alt=""/>
                    <p>电影</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="images/icon03.png" alt=""/>
                    <p>购物</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="images/icon04.png" alt=""/>
                    <p>休闲</p>
                </a>
            </li>
        </ul>
    </div>
    <!--商品推荐-->
    <div class="dm-di2">
        <div class="title">商品推荐</div>
        <div class="ul">
            <ul class="am-cf suanUl">
                <li class="am-fl">
                    <a href="21店铺详情.html">
                        <img src="images/banner.jpg" alt=""/>
                        <p class="p1">木屋烧烤超值海鲜最低5折 让你爽到爆</p>
                        <p class="p2">
                            <span class="dmColor"><i>¥</i> 28.80</span>
                            <span class="sp2">¥ 56.90</span>
                        </p>
                    </a>
                </li>
                <li class="am-fl">
                    <a href="21店铺详情.html">
                        <img src="images/banner.jpg" alt=""/>
                        <p class="p1">木屋烧烤超值海鲜最低5折 让你爽到爆</p>
                        <p class="p2">
                            <span class="dmColor"><i>¥</i> 28.80</span>
                            <span class="sp2">¥ 56.90</span>
                        </p>
                    </a>
                </li>
                <li class="am-fl">
                    <a href="21店铺详情.html">
                        <img src="images/banner.jpg" alt=""/>
                        <p class="p1">木屋烧烤超值海鲜最低5折 让你爽到爆</p>
                        <p class="p2">
                            <span class="dmColor"><i>¥</i> 28.80</span>
                            <span class="sp2">¥ 56.90</span>
                        </p>
                    </a>
                </li>
            </ul>
        </div>
    </div>
    <!--活动推荐-->
    <div class="dm-di3">
        <div class="title">活动推荐</div>
        <ul>
            <li>
                <img src="images/banner.jpg" alt=""/>
                <p class="p1">木屋烧烤全场海鲜最低超值5折, 让你这个冬天 爽到爆！</p>
                <p class="p2">
                    <span class="dmColor"><i>¥</i> 28.80</span>
                    <span class="sp2">¥ 56.90</span>
                    <a class="gradualBg" href="#">立即抢购</a>
                </p>
            </li>
            <li>
                <img src="images/banner.jpg" alt=""/>
                <p class="p1">木屋烧烤全场海鲜最低超值5折, 让你这个冬天 爽到爆！</p>
                <p class="p2">
                    <span class="dmColor"><i>¥</i> 28.80</span>
                    <span class="sp2">¥ 56.90</span>
                    <a class="gradualBg" href="#">立即抢购</a>
                </p>
            </li>
        </ul>
    </div>
    <!--店铺推荐-->
    <div class="dm-di4">
        <div class="title">店铺推荐</div>
        <div class="CollectList">
            <div class="Collect am-cf">
                <a href="21店铺详情.html">
                    <div class="img am-fl">
                        <img src="images/tu4.jpg" alt="">
                    </div>
                    <div class="text am-fl">
                        <p class="p1">左岸咖啡</p>
                        <p class="p2 xingNum" data-index="2">
                            <img src="images/xing_x.png" alt="">
                            <img src="images/xing_x.png" alt="">
                            <img src="images/xing.png" alt="">
                            <img src="images/xing.png" alt="">
                            <img src="images/xing.png" alt="">
                        </p>
                        <p class="p3">
                            <span>下午茶</span>
                            <span>咖啡</span>
                        </p>
                        <p class="p4">1.5km</p>
                        <p class="p5">买一送一</p>
                    </div>
                </a>
            </div>
            <div class="Collect am-cf">
                <a href="21店铺详情.html">
                    <div class="img am-fl">
                        <img src="images/tu4.jpg" alt="">
                    </div>
                    <div class="text am-fl">
                        <p class="p1">左岸咖啡</p>
                        <p class="p2 xingNum" data-index="2">
                            <img src="images/xing_x.png" alt="">
                            <img src="images/xing_x.png" alt="">
                            <img src="images/xing.png" alt="">
                            <img src="images/xing.png" alt="">
                            <img src="images/xing.png" alt="">
                        </p>
                        <p class="p3">
                            <span>下午茶</span>
                            <span>咖啡</span>
                        </p>
                        <p class="p4">1.5km</p>
                        <p class="p5">拼团特惠</p>
                    </div>
                </a>
            </div>
        </div>
    </div>
</div>

<div class="FootderBox">
    <ul class="am-avg-sm-4">
        <li class="on">
            <a href="#">
                <p class="img"><img src="images/CombinedShape_choose.png" alt="首页"/></p>
                <p class="text">首页</p>
            </a>
        </li>
        <li>
            <a href="#">
                <p class="img"><img src="images/Shape.png" alt="附近"/></p>
                <p class="text">附近</p>
            </a>
        </li>
        <li>
            <a href="#">
                <p class="img"><img src="images/order.png" alt="订单"/></p>
                <p class="text">订单</p>
            </a>
        </li>
        <li>
            <a href="#">
                <p class="img"><img src="images/user.png" alt="会员"/></p>
                <p class="text">会员</p>
            </a>
        </li>
    </ul>
</div>
<script>

        //banner
        $('.banner .am-slider').flexslider({
            pauseOnAction: false,            // Boolean: 用户操作时停止自动播放
            slideshowSpeed: 3000,           // Integer: ms 滚动间隔时间
            controlNav: false,               // Boolean: 是否创建控制点
            directionNav: false             // Boolean: 是否创建上/下一个按钮（previous/next）
        });

        //计算 suanUl 宽度
        suanUl()
        function suanUl(){
            let liNum = $('.suanUl li').length
            let widthUl = liNum * 3.4
            $('.suanUl').css('width', widthUl+'rem')
        }

        $('.xingNum').each(function(){
            let that = $(this)
            let index = that.attr('data-index')
            let img = that.find('img')
            let xing='images/xing.png'
            let xing_x='images/xing_x.png'
            img.each(function(i){
                if(i<index){
                    $(this).attr('src',xing_x)
                }else{
                    $(this).attr('src',xing)
                }
            })
        })


</script>
</body>
</html>